{% extends 'base.html' %}

{% block extra_head %}
<script src="{{ MEDIA_URL }}js/jquery.form.js" type="text/javascript"></script>
<script src="{{ MEDIA_URL }}js/course_search.js" type="text/javascript"></script>
{% endblock extra_head %}
{% block content %}

<h2>Search For Courses</h2>
<div id="search-container">


    <form id="search-form" action="{% url course_results plan.id %}" method="GET">
        {% comment %}
        <label for="department">Department</label>
        <select id="department" name="department">
            {% for department in departments %}
                <option value="{{ department }}">{{ department }}</option>
            {% endfor %}
        </select>

        <label for="course-code">Course Code</label>
        <input id="course-code" name="course-code" type="text" />

        <label for="term">Term</label>
        <select id="term" name="term">
            {% for term in terms %}

        <fieldset>
            <legend>TE Fields</legend>
            <label for="">
        {% endcomment %}
        {{ form.as_p }}
        <input type="submit" value="Search" />
    </form>

    <div class="loading">
        <img src="{{MEDIA_URL}}img/bar-load.gif"/>
        <br/>
        Loading...
    </div>

    <table style="display: none;" id="search-results" class="plannedTerm" width="95%">
        <tr>
            <th>Course Code</th>
            <th>Course Name</th>
            <th>Math</th>
            <th>Science</th>
            <th>Eng. Science</th>
            <th>Eng. Design</th>
            <th>CSE List</th>
            <th></th>
        </tr>
        <tr>
            <td colspan="8">Use Search Above</td>
        </tr>
    </table>


</div>

{% endblock content %}
